<!--
伪类元素    :hover
不占用空间  子绝父相
-->
<style>
    .box {
        position: relative;
        width: 240px;
        height: 170px;
        margin: 100px auto;
    }
    .pic {
        width: 100%;
        height: 100%;
    }
    .mask {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 255, 0.3) url(../resources/pictures/play.png) no-repeat center;
    }
    /*
    经过父容器，里面的子元素显现
        .box:hover .mask{}
    易错写法
        .box:hover{}
        .mask:hover{}
    */
    .box:hover .mask{
        display: block;
    }
</style>

<div class="box">
    <div class="mask"></div>
    <img class="pic" src="../resources/pictures/item.png" alt="图片">
</div>